{include file="index/header" /}
<div class="container xs-top-15" style="max-width:960px">
    <div class="columns">
        <!--区域1-->
        <div class="column">
            <!--模块1-->
            <div class="card">
                <div class="xs-card-content">
                    <aside class="menu">
                        <p class="menu-label">
                            会员中心
                        </p>
                        <ul class="menu-list">
                            <li><a href="{:url('index/user/main')}">会员首页</a></li>
                        </ul>
                        <p class="menu-label">
                            个人信息
                        </p>
                        <ul class="menu-list">
                            <li><a href="{:url('index/user/pay')}">充值题币</a></li>
                            <li><a class="is-active" href="{:url('index/user/open_vip')}">开通会员</a></li>
                            <li><a href="{:url('index/user/password')}">修改密码</a></li>
                        </ul>
                        <!-- <p class="menu-label">
                            试题管理
                        </p>
                        <ul class="menu-list">
                            <li><a>我的提问</a></li>
                            <li><a>我的回答</a></li>
                        </ul> -->
                    </aside>
                </div>
            </div>
            <hr class="xs-hr">

        </div>
        <!--区域2-->
        <div class="column is-four-fifths">
            <div class="card">
                <header class="card-header">
                    <p class="card-header-title">
                        开通会员
                    </p>
                </header>
                <article class="message is-info">
                    <div class="message-body">
                        一个月(31天) 价格为 <strong>{$cost.vip_price}</strong> 积分,如开通时间3个月以上 请联系客服咨询优惠 <br>
                        如果您已经是会员，那么开通时长会继续增加哦
                    </div>
                </article>
                <div class="xs-card-content">
                    <div class="content has-text-centered">
                        <div class="field is-horizontal">
                            <div class="field-label">
                                <label class="label">开通时长：</label>
                            </div>
                            <div class="field-body">
                                <div class="field is-narrow">
                                    <div class="control">
                                        <label class="radio">
                                            <input type="radio" name="time" value="1" checked>
                                            1个月
                                        </label>
                                        <label class="radio">
                                            <input type="radio" name="time" value="3">
                                            3个月
                                        </label>
                                        <label class="radio">
                                            <input type="radio" name="time" value="12">
                                            12个月
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="field is-horizontal">
                            <div class="field-label">
                                <label class="label">充值方式：</label>
                            </div>
                            <div class="field-body">
                                <div class="field is-narrow">
                                    <div class="control">
                                        <label class="radio">
                                            <input type="radio" name="" value="1" checked>
                                            题币余额({$ratio}题币=1元)
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="field is-horizontal">
                            <div class="field-label is-normal">
                                <label class="label">账户剩余：</label>
                            </div>
                            <div class="field-body">
                                <div class="field">
                                    <p class="control">
                                        <input class="input is-static" id="balance" type="text"
                                               value="{$user.balance} 题币" readonly>
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="field is-horizontal">
                            <div class="field-label">
                            </div>
                            <div class="field-body">
                                <div class="field">
                                    <div class="control">
                                        <button class="button is-link" onclick="opens()">
                                            确认开通
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    function opens() {
        var data = {
            time: $("[name='time']").val(),
        };
        $.post("{:url('index/user/open_vip')}", data, function (data, status) {
            if(data.code == 1){
                window.location = "{:url('index/user/main')}";
            }else{
                layer.alert(data.msg);
            }
        });
    }
</script>
{include file="index/footer" /}